HopscotchTours = {
	dashboard1:{
		id: "hello-hopscotch",
		showPrevButton:true,
		steps: [
			{
				title: "Welcome to Craftivity!",		placement: "bottom",		target: '#craftivityLogo',
				content: "Lets take a quick 1 minute tour of what Craftivity has to offer."
			},
			{
				title: "Welcome to Craftivity!",		placement: "bottom",		target: '#craftivityLogo',
				content: "Craftivity is software designed to help you get the most out of your time and business. It does so using the following tools..."
			},
			{
				title: "Important this week",			placement: "top",			target: '#module-left-important-div',
				content: "Keep your critical tasks and reminders for the week here, where it will be highly visible. </br></br>At the end of the week, you'll have a chance to review or renew the list."
			},
			{
				title: "Calendar",						placement: "bottom",		target: '.widget-calendar,#module-left-calendar-div',
				content: "Manage your appointments using the easy to use Calendar. </br></br>The mini calendar (right) will give you a condensed view of your scheduled events on any page."
			},
			{
				title: "Goals and Milestones",			placement: "bottom",		target: '.widget-goals',
				content: "See the big picture by deciding on your Goals.</br></br>Create Milestones to keep you on track.</br></br>Schedule action plans to get you there."
			},
			{
				title: "Workweek",						placement: "bottom",		target: '.widget-workweek',
				content: "Design your perfect workweek with the Workweek Designer. Visualize how your time is used, and think about how you will get everything done with the limited hours you have."
			},
			{
				title: "Secretary",						placement: "bottom",		target: '#module-left-time-div',
				content: "Finally, The Secretary will combine your calendar events and workweek plans to guide you through your day."
			},
			{
				title: "Keep this tab open",			placement: "bottom",		target: '#module-left-logo-div',
				content: "To get the most out of Craftivity, keep it open in a browser tab throughout the workday."
			},
			{
				title: "Get Help",						placement: "bottom",		target: '#module-left-help-div',
				content: "Look for this widget on any page if you have questions about how something works, </br>or just want to learn more about Craftivity."
			},
			{
				title: "Talk to us",					placement: "bottom",		target: '#module-left-feedback',
				content: "If you have questions, feedback, suggestions, or found a bug.</br></br>Leave us a message. We would love to hear from you!"
			}
		]
	},
	calendar1:{
		id: "hello-hopscotch",
		showPrevButton:true,
		steps: [
			{
				title:"Craftivity Calendar",			placement:"bottom",			target:'.header.variable-width',
				content: "Lets go over the main features really quick."
			},
			{
				title:"Timeline",						placement:"bottom",			target:'.timeline-container',
				content: "The timeline allows you to traverse your calendar. Try clicking on a day in the timeline.",
				onShow:function(){
					$('.td-day').bind('click.hopscotch',function(){
						$('.hopscotch-next').click();
					});
				},
				onNext:function(){
					$('.td-day').unbind('click.hopscotch');
				}
			},
			{
				title:"Timeline",			placement:"bottom",			target:'.day.timeline-focus',
				content: "The yellow box shows the day the timeline is focused on.",
				onShow:function(){
					setTimeout(function(){
						$('.day.timeline-focus,td.center').addClass('hopscotch-border');
					},1000);
				}
			},
			{
				title:"Timeline",			placement:"top",			target:'#timeline-month',
				content: "You can also use the date buttons here to set which day you want to view.",
				onShow:function(){
					$('#timeline-day,#timeline-year').addClass('hopscotch-border');
				}
			},
			{
				title:"Events",							placement:"top",			target:'.day:visible:first',
				content: "Events have a start time, description, and can have a category. End time is optional.",
				onShow:function(){
					$('.event-add:visible:first').click();
				},
				onPrev:function(){
					$('.event-new').not('.hidden').find('.event-cancel').click();
				},
				onNext:function(){
					$('.event-category-button:visible:first').click();
				}
			},
			{
				title:"Events",			placement:"top",			target:'.event-new:visible:first',
				content: "Categories help color code your events, and can be customized to your preference.",
				onShow:function(){
					setTimeout(function(){
						$('.hopscotch-border').removeClass('hopscotch-border');
						$('.event-new:visible:first').addClass('hopscotch-border');
					},250);
				},
				onPrev:function(){
					$('.event-category-select-button[value=0]:visible:first').click();
					$('.event-new').not('.hidden').find('.event-cancel').click();
				}
			}
		],
		onEnd:function(){
			// do all the normal onEnd stuff
			HopscotchTours.end();
			$('.event-new').not('.hidden').find('.event-cancel').click();
			setTimeout(function(){
				$('.module-left-help[key=calendar2]').click();
			},750);
		}
	},
	calendar2:{
		id: "hello-hopscotch",
		showPrevButton:true,
		steps: [
			{
				title:"Craftivity and Google Calendar",			placement:"bottom",				target:'.google_connect',
				content: "You can sync up your events between Craftivity and Google Calendar."
			},
			{
				title:"Craftivity and Google Calendar",			placement:"bottom",				target:'.google_connect',
				content: "Craftivity created events will appear in your Google Calendar, and vice-versa."
			},
			{
				title:"Connect to Google Calendar",				placement:"bottom",				target:'.google_connect',
				content: "Connect to Google Calendar to find out more."
			},
		]
	},
	calendar3:{
		id: "hello-hopscotch",
		showPrevButton:true,
		steps: [
			{
				title:"Google Calendar",						placement:"bottom",				target:'.widget.day:visible:first',
				content: "You can now edit and view your events in Craftivity or Google Calendar."
			},
			{
				title:"Google Calendar",						placement:"bottom",				target:'.fa-refresh',
				content: "Don't see an event you just added? Hit the sync button. Otherwise we will automatically sync for you every 15 minutes."
			},
			{
				title:"Google Calendar",						placement:"bottom",				target:'.header .fa-gears',
				content: "Got more than 1 Google calendar? You can choose which ones you want to see in Craftivity in the Calendar Options.</br>Click the Gears Icon now.",
				onShow:function(){
					$('.header .fa-gears').bind('click.hopscotch',function(){
						$('.hopscotch-next').click();
					});
				},
				onNext:function(){
					$('.header .fa-gears').unbind('click.hopscotch');
					if(!$('.widget.options').is(':visible')){
						Main.toggleOptions('calendar');
					}
				},
				onPrev:function(){
					if($('.widget.options').is(':visible')){
						Main.toggleOptions('calendar');
					}
				}
			},
			{
				title:"Google Calendar",						placement:"right",				target:'.widget.options',
				content: "Any calendars you deselect, will not be seen in Craftivity. </br>You can also disconnect from Google Calendar here.",
				onPrev:function(){
					if($('.widget.options').is(':visible')){
						Main.toggleOptions('calendar');
					}
				}
			},
			{
				title:"Google Calendar",						placement:"bottom",				target:'.event:visible:first',
				content: "That's all! </br>If you see a little red or grey corner on your events, try clicking it. That tells you the event is synced up.",
				onPrev:function(){
					if(!$('.widget.options').is(':visible')){
						Main.toggleOptions('calendar');
					}
				}
			}
		],
		onEnd:function(){
			HopscotchTours.end('calendar3');
			if($('.widget.options').is(':visible')){
				Main.toggleOptions('calendar');
			}
		}
	},
	goal1:{
		id: "hello-hopscotch",
		showPrevButton:true,
		steps:[
			{
				title:"Goals",									placement:"bottom",				target:'.header.variable-width',
				content: "Craftivity can help you manage and accomplish more of your goals.</br>Here you see a few goal examples."
			},
			{
				title:"Goals",									placement:"right",				target:'.goal:visible:first',
				content: "Each goal has to have a start and end date. We create your first and final milestones using these dates.",
				onShow:function(){
					if(!$('.goal_milestones:first').is(':visible')){
						$('.action_toggle:first').click();
					}
				},
				onPrev:function(){
					if($('.goal_milestones:first').is(':visible')){
						$('.action_toggle:first').click();
					}
				}
			},
			{
				title:"Milestones",								placement:"top",				target:'.goal_milestones:visible:first',
				content: "Milestones help you track your progress towards goals.</br>If you know that you're falling behind on a milestone, then you can adjust your target or ramp up your action plan to catch up."
			},
			{
				title:"Milestones Widget",						placement:"top",				target:'#module-left-milestones-div',
				content: "The Milestones Widget will notify you of upcoming milestones, and help you track your progress throughout the year."
			},
			{
				title:"Action Plans",							placement:"left",				target:'.goal:visible:last .widget-title.sub:last',
				content: "These goals aren't going to happen without action!</br>Design a weekly action plan and block off some time to get it done.",
				onShow:function(){
					if(!$('.goal:visible:last .goal_actions_div').is(':visible')){
						$('.goal:visible:last .action_toggle:last').click();
					}
					$('.goal_actions_div:last').addClass('hopscotch-border');
				},
				onPrev:function(){
					if($('.goal:visible:last .goal_actions_div').is(':visible')){
						$('.goal:visible:last .action_toggle:last').click();
					}
				}
			},
			{
				title:"Action Plans",							placement:"left",				target:'.goal:visible:last .widget-title.sub:last',
				content: "Action plans you create here will appear in your Workweek Designer, where you'll decide where to best schedule it."
			},
			{
				title:"Past, Present, and Future",							placement:"bottom",				target:'.header img',
				content: "Goals whose end date have passed will be considered 'Past' goals. </br>Goals not yet started are considered 'Future' goals.</br>Use these filters to browse all your goals.",
				onShow:function(){
					$('.hopscotch-border').removeClass('hopscotch-border');
					$('[name=time_frame]').addClass('hopscotch-border');
				}	
			}
		]
	},
	workweek1:{
		id: "hello-hopscotch",
		showPrevButton:true,
		steps:[
			{
				title:"Workweek Designer",					placement:"bottom",				target:'.header.variable-width',
				content: "Design your ideal workweek using the Workweek Designer"
			},
			{
				title:"Secretary",					placement:"right",				target:'#module-left-time-div',
				content: "Each day, the Secretary will remind you what you ought to be doing based on your workweek and calendar events."
			},
			{
				title:"Add Action",					placement:"right",				target:'.weekday:visible:first',
				content: "Hover over an empty time block and click the green + to add an action."
			},
			{
				title:"Instructions",					placement:"top",				target:'.scheduled-event:first',
				content: "You can drag actions to move them, and stretch the bottom borders to change the duration."
			},
			{
				title:"Add Multiple Actions",					placement:"bottom",				target:'#add_events',
				content: "Use the bulk add button if you want to create the same action over many days. Try it now.",
				onShow:function(){
					$('#add_events').bind('click.hopscotch',function(){
						setTimeout(function(){
							$('.hopscotch-next').click();
						},700);
					});
				},
				onNext:function(){
					$('#add_events').unbind('click.hopscotch');
					Workweek.showAdd($('#add_events').get(0));
				}
			},
			{
				title:"Add Multiple Actions",					placement:"bottom",				target:'#add_form .widget',
				content: "This is the bulk add interface.",
				onPrev:function(){
					if($('#add_form').is(':visible')){
						Workweek.hideAdd();
					}
				}
			},
			{
				title:"Categories",					placement:"right",				target:'#add_form .widget .form-input-value:last',
				content: "You can color code your workweek actions using Categories.",
				onNext:function(){
					if($('#add_form').is(':visible')){
						Workweek.hideAdd();
					}
				}
			},
			{
				title:"Categories",					placement:"bottom",				target:'.header .fa-gears',
				content: "To customize your categories, open up Workweek Options.",
				onShow:function(){
					$('.header .fa-gears').bind('click.hopscotch',function(){
						$('.hopscotch-next').click();
					});
				},
				onNext:function(){
					$('.header .fa-gears').unbind('click.hopscotch');
					if(!$('.widget.options').is(':visible')){
						Main.toggleOptions('workweek');
					}
				},
				onPrev:function(){
					if(!$('#add_form').is(':visible')){
						Workweek.showAdd($('#add_events').get(0));
					}
				}
			},
			{
				title:"Workweek Options",					placement:"right",				target:'.widget.options',
				content: "Here, you can also </br>1. set the boundaries of your workday hours</br>2. set your own start day for the week</br>3. hide those workdays which are actually relax days.",
				onPrev:function(){
					if($('.widget.options').is(':visible')){
						Main.toggleOptions('workweek');
					}
				}
			}
		],
		onEnd:function(){
			if($('.widget.options').is(':visible')){
				Main.toggleOptions('workweek');
			}
			HopscotchTours.end('workweek1');
		}
	}
};

HopscotchTours.start = function(){
	var key = HopscotchTours.currentTour || "";
	console.log(key + ' started');
	Ajax.run({
		method:"craftivityService.saveHopscotchStart",
		args:{tourKey:key}
	});
};
HopscotchTours.end = function(){
	var key = HopscotchTours.currentTour || "";
	$('.hopscotch-border').removeClass('hopscotch-border');
	// show the checkmark
	$('.module-left-help[key='+key+']').find('.fa-check').show();
	// record this has finished
	console.log(key + ' ended');
	Ajax.run({
		method:"craftivityService.saveHopscotchFinish",
		args:{tourKey:key}
	});
};
HopscotchTours.startTour = function(key){
	HopscotchTours.currentTour = key;
	hopscotch.startTour(HopscotchTours[key],0);
};

// add common events to tours
for(var key in HopscotchTours){
	HopscotchTours[key].onClose = function(){
		$('.hopscotch-border').removeClass('hopscotch-border');
	};
	HopscotchTours[key].onStart = function(){
		HopscotchTours.start();
	}
	if('onEnd' in HopscotchTours[key]){
		// dont overwrite existing onend
	} else {
		HopscotchTours[key].onEnd = function(){
			HopscotchTours.end();
		}
	}
}
